<template>
  <div v-loading="loading" class="classify-con">
    <el-scrollbar ref="classifyScrollbar" class="classify-scrollbar">
      <div class="tip"><i class="el-icon-info" />鼠标按住标签，通过拖动可以调整标签顺序</div>
      <draggable
        v-model="courseLabel"
        :animation="340"
        @end="handleEnd"
      >
        <el-tag class="item-course-tag" v-for="(tag,i) in courseLabel" :key="i" closable :disable-transitions="false" style="margin-left:5px;margin-top:5px;" @close="handleCloseTag(tag)">{{ tag }}</el-tag>
      </draggable>
      <el-input ref="tagInput" v-model="tagInputValue" class="input-new-tag" style="margin-top:5px;width:70%;" size="small"  @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" />
      <span class="tip"><i class="el-icon-info" />输入完成后请回车</span>
    </el-scrollbar>
  </div>
</template>
<script>
import { fetchList, del } from './api'
import permission from '@/directive/permission/index.js' // 权限判断指令
import Vue from 'vue'
import draggable from 'vuedraggable'
export default {
  name: 'Classify',
  directives: { permission },
  components: { draggable },
  model: {
    prop: 'tags',
    event: 'setTags'
  },
  props: {
    parentref: {
      type: Boolean,
      default: false
    },
    permissionInsert: {
      type: String,
      default: ''
    },
    permissionUpdate: {
      type: String,
      default: ''
    },
    permissionDelete: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      data: [],
      tagInputVisible: false,
      tagInputValue: '',
      courseLabel: []
    }
  },
  computed: {
    formatData() {
      let tmp
      if (!Array.isArray(this.data)) {
        tmp = [this.data]
      } else {
        tmp = this.data
      }
      Array.from(tmp).forEach(item => {
        if (item._edit === undefined) {
          Vue.set(item, '_edit', false)
        }
      })
      return tmp
    }
  },
  created() {
    this.queryClassify()
  },
  methods: {

    /**
     * 切换编辑状态
     */
    toggleEdit(index) {
      const record = this.formatData[index]
      record._edit = !record._edit
    },

    /**
     * 查询标签列表
     */
    queryClassify() {
      this.loading = true
      return new Promise((resolve, reject) => {
        fetchList({ dataId: this.$route.query.ai, dataType: 'ZJHD' }).then(response => {
          this.courseLabel = response.data.data.configValue && response.data.data.configValue.split(',') || []
          this.loading = false
          resolve(response.data.data)
        }).catch(error => {
          reject(error)
        })
      })
    },
    /**
       * 显示课程标签输入框
       */
    showTagInput() {
      this.tagInputVisible = true
      this.$nextTick(_ => {
        this.$refs.tagInput.$refs.input.focus()
      })
    },
    /**
     * 删除提交
     */
    deleteclassify(id) {
      this.loading = true
      return new Promise((resolve, reject) => {
        del({ id: id }).then(() => {
          this.loading = false
          this.$message({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.refresh()
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },

    /**
     * 更新
     */
    refresh() {
      this.queryClassify().then((res) => {
        if (this.parentref) {
          this.$emit('onrefresh', res)
        }
      })
    },
    /**
       * 确认课程标签输入框内容
       */
    handleInputConfirm() {
      const inputValue = this.tagInputValue.trim().replace(/,|，/g, '')
      if (inputValue) {
        this.courseLabel.push(inputValue)
        this.$emit('setTags', this.courseLabel.join(','))
      }
      this.tagInputVisible = false
      this.tagInputValue = ''
    },
    /**
       * 确认课程标签
       */
    handleCloseTag(tag) {
      this.courseLabel.splice(this.courseLabel.indexOf(tag), 1)
      this.$emit('setTags', this.courseLabel.join(','))
    },
    handleEnd() {
      this.$emit('setTags', this.courseLabel.join(','))
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.classify-con {
  position: relative;

  .classify-scrollbar {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .el-scrollbar__wrap {
      max-height: 400px;
      margin-bottom: 0 !important;
      overflow-x: hidden;
    }

    .el-scrollbar__view {
      margin: 10px;
      overflow: hidden;
    }
    .item-course-tag{
      height: auto;
      white-space: normal;
      max-width: 800px;
      word-break: break-all;
    }
  }

  .classify-add {
    height: 40px;
    line-height: 40px;
    border: 1px dotted rgba(226, 227, 232, 1);
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(254, 90, 97, 1);
    text-align: center;
    cursor: pointer;
    margin-top: 10px;

    &:hover {
      border: 1px dotted #fe5a61;
    }
  }

  .classify-item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 10px;

    .item-info {
      flex: 1;
      display: flex;
      align-items: center;

      .sort {
        margin-left: 20px;
        color: #c0c4cc;
        display: inline-block;
        font-size: 14px;
        vertical-align: baseline;
        width: 15%;
        text-align: center;
      }
    }

    .item-btn {
      margin-left: 20px;
    }
    .input-new-tag{
      margin-top: 10px;
      width:65%;
    }
  }
    .tip{
      font-size: 14px;
      color: $mainColor;
      margin-bottom: 10px;
    }
}
</style>
